<template>
    <div class="echarts04" ref="echarts04"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {
            myecharts: null,
            option: {
                yAxis: {
                    type: 'category',
                    data: [],
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                },
                xAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        return `商家: ${params[0].name}<br/>销量: ${params[0].value}`;
                    },
                    backgroundColor: 'rgba(50, 50, 50, 0.7)',
                    borderColor: '#333',
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: [
                        {
                            data: [],
                            type: 'bar',
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0, y: 0, x2: 1, y2: 0,
                                    colorStops: [{
                                        offset: 0, color: 'rgba(84, 83, 238, 0.9)' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: 'rgba(167, 109, 229, 0.9)' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                },
                                borderRadius: [0, 20, 20, 0], // 四个角的圆角半径
                                borderWidth: 0 // 边框宽度
                            },
                            barWidth: '50%' // 控制柱子宽度
                        }
                    ]
                },
                ws: null,
                page: 1
            }
        },
            methods: {
            getData() {
                this.ws = new WebSocket('ws://127.0.0.1:9998');
                this.ws.onopen = () => {
                    console.log('连接成功');
                    let params = {
                        action: 'getData',
                        socketType: 'sellerData',
                        chartName: 'seller',
                        value: ''
                    }
                    this.ws.send(JSON.stringify(params));

                    this.ws.onmessage = (e) => {
                        let data = JSON.parse(e.data);
                        // console.log(data);

                        let sellers = JSON.parse(data.data)
                        // console.log(sellers);

                        sellers.sort((a, b) => b.value - a.value)

                        let total = Math.ceil(sellers.length / 5)
                        // console.log(total);

                        // 截取当前页数减一乘五到当前页数乘五的数据
                        let list = sellers.slice((this.page - 1) * 5, this.page * 5)
                        // console.log(list);

                        // console.log(this.page);

                        this.option.yAxis.data = list.map(item => item.name).sort((a, b) => a - b)
                        this.option.series[0].data = list.map(item => item.value).sort((a, b) => a - b)

                        this.myecharts.setOption(this.option);

                        this.page++
                        if (this.page > total) {
                            this.page = 1
                        }
                    }
                }
            }
        },
        mounted() {
            this.myecharts = echarts.init(this.$refs["echarts04"]);
            // this.myecharts.setOption(this.option);
            this.getData()
        }
    }
</script>
<style scoped>
.echarts04 {
    width: 100%;
    height: 100%;
}
</style>